<!doctype html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<link href="style/login.css" rel="stylesheet" type="text/css">
  
<script>
 Parse.initialize("EL9rGBARwKQl3NL4HAQ2U4GxQYjXV8dDDvDDaTPe", "WQLflsIP1zoVHCZgNjpr95dtrmaqjCaCkWSbOSrU");
window.onload = function () {
 document.getElementById('submit').onclick = submitUser;
}

var submitUser = function()
{
        if (document.getElementById('username').value.search("%")>-1)
		{
			alert("Username cannot contain symbols");
		}
	else if (document.getElementById('username').value.search("#") > -1)
	{
	 alert("Username cannot contain symbols");
	}
        else
        {
         var user = new Parse.User();
         user.set("username", document.getElementById('username').value);
         user.set("password", document.getElementById('password').value);
         
         if(document.getElementById('genderMale').checked)
         {
          user.set("gender", "male");
         }
         else if(document.getElementById('genderFemale').checked)
         {
           user.set("gender", "female");
         }
         
         
         
         if(document.getElementById('classHealer').checked)
         {
          user.set("class", "healer");
         }
         else if(document.getElementById('classMage').checked)
         {
           user.set("class", "mage");
         }
         else if(document.getElementById('classNinja').checked)
         {
           user.set("class", "ninja");
         }
         else if(document.getElementById('classRanger').checked)
         {
           user.set("class", "ranger");
         }
         else if(document.getElementById('classWarrior').checked)
         {
           user.set("class", "warrior");
         }
         
          
         user.signUp(null, {
           success: function(user) {
             //redirect to home page
             window.location.href="index.html";
           },
           error: function(user, error) {
             // Show the error message somewhere and let the user try again.
             alert("Error: " + error.message);
           }
         });
        }
 

}
</script>


</br> </br> </br> </br> </br>
<form>
  <h1>Sign Up</h1>
  <div class="inset">
  <p>
    <label for="email">USERNAME</label>
    <input type="text" name="username" id="username">
  </p>
  <p>
    <label for="password">PASSWORD</label>
    <input type="password" name="password" id="password">
  </p>
  <p>
    <label for="gender">GENDER</label>
    <input type="radio" name="gender" id="genderMale" value="male" checked><span class="radio">Male</span></br>
    <input type="radio" name="gender" id="genderFemale" value="female"><span class="radio">Female</span></br>
  </p>
  </br>
  <p>
    <label for="class">CLASS</label>
    <input type="radio" name="class" id="classHealer" value="healer" checked><span class="radio">Healer &nbsp;&nbsp;&nbsp;&nbsp;</span><img src="assets/images/mhealer.png"> / <img src="assets/images/fhealer.png"></br>
    <input type="radio" name="class" id="classMage" value="mage"><span class="radio">Mage &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><img src="assets/images/mmage.png"> / <img src="assets/images/fmage.png"></br>
    <input type="radio" name="class" id="classNinja" value="ninja"><span class="radio">Ninja &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><img src="assets/images/mninja.png"> / <img src="assets/images/fninja.png"></br>
    <input type="radio" name="class" id="classRanger" value="ranger" ><span class="radio">Ranger &nbsp;&nbsp;</span><img src="assets/images/mranger.png"> / <img src="assets/images/franger.png"></br>
    <input type="radio" name="class" id="classWarrior" value="warrior"><span class="radio">Warrior &nbsp;&nbsp;</span><img src="assets/images/mwarrior.png"> / <img src="assets/images/fwarrior.png"></br>
  </p>
  </div>

  <p class="p-container">
    <input type="button" name="submit" id="submit" value="Register">
  </p>
</form>